<style>
    /*订单显示*/
    .item{ width:270px; height:135px; border:1px solid #ccc; padding:5px;border-radius:5px;float:left;margin:5px;}
    .item .tags{width:20px;float:left;text-align:center;}
    .item .pic{width:100px; float:left;text-align:center;}
    .item .pic img{max-width:100px; max-height:135px;border-radius:5px;}
    .item .text{width: 150px;text-align:left;float: right;}
    .text-item{width: 100%;}
    .clear{clear:both;}
    .layui-btn-small {
        height: 20px;
        line-height: 20px;
        padding: 0 5px;
        font-size: 12px;
    }
    .small-table{margin: 0; }
    .small-table td{padding: 4px;font-size: 10px}
</style>
<div class="fixed-bar">
    <form class="layui-form layui-form-pane fixed-bar-form" action="{:url()}" method="get" id="hisi-table-search-optable" >
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">订单号</label>
                <div class="layui-input-inline">
                    <input type="text" name="client_ordernum" value="{$client_ordernum}" lay-verify="" placeholder="输入订单号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">SKU</label>
                <div class="layui-input-inline">
                    <input type="text" name="sku" value="{$sku}" lay-verify="" placeholder="输入SKU" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">下单日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_date_range" readonly="" id="create_date_range" lay-verify="" placeholder="选择下单日期" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">出货日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="shipment_date_range" readonly="" id="shipment_date_range" lay-verify="" placeholder="选择出货日期" class="layui-input">
                </div>
            </div>
            <div class="layui-inline removeStat">
                <label class="layui-form-label">来源账号</label>
                <div class="layui-input-inline">
                    {:Form::select('is_auto_import', '', $orderFrom, '', '')}
                </div>
            </div>
            <div class=" layui-inline layui-upload">
                <button type="submit" class="layui-btn"  lay-submit="" lay-filter="demo1"  >搜索</button>
            </div>
        </div>
    </form>
</div>

{include file="mp@out_node_progress/menu" /}

<div class="layui-collapse">
    <div class="layui-colla-item caigou">
        <h2 class="layui-colla-title"></h2>
        <div id="view" class="layui-colla-content layui-show">
        </div>
    </div>
</div>

<script id="tpl" type="text/html">

    {{#  layui.each(d, function(kkk, vvv){ }}

    <div class="item layui-anim layui-anim-scaleSpring">
        <a>
            <div class="pic">
                <img src="{{ vvv.pic }}"
                     class="lay-pic">
            </div>
        </a>
        <div class="text">
            <a>
                <div class="text-item"> 出货时间：{{ vvv.shipment_time }}&nbsp;</div>
                <span class="black">裁剪中</span></br>
                <span class="copy-item blue">{{ vvv.client_ordernum }}</span>&nbsp;&nbsp; <span class="layui-btn layui-btn-small layui-btn-warm">{{ vvv.type_txt }}</span><br>
                <span class="copy-item blue">{{ vvv.sku }}</span></br>
                <span class="blue" id="getOrderDetail-{{vvv.id}}" onmouseover="getOrderDetail({{vvv.id}})" >{{ vvv.quantity }}</span>&nbsp;件
                &nbsp;<br>
            </a>
            <div class="text-item">
                <select onchange="select_group_id(this,{{ vvv.id }})" style="max-width: 100px;height: 25px;" class="mimo-select">
                    {{#  layui.each(vvv.groupList, function(k2, v2){ }}
                    <option value="{{ k2 }}"  {{#  if(k2 == vvv.g_id){ }} selected {{# } }}>
                        {{ v2 }}
                    </option>
                    {{#  }); }}
                </select>

                <a href="{:url('unitSet')}?order_id={{ vvv.id }}" style="float:right" title="订单操作" class="hisi-iframe" hisi-data="{width: '800px', height: '500px'}"><i class="aicon ai-caidan" style="font-size:25px;"></i>&nbsp;&nbsp;<a>
            </div>
            <a> </a>
        </div>
        <a> </a>
    </div>

    {{#  }); }}

    <div class="clear"></div>
</script>

<div id="overTimeTpl" class="hide">
    <div id="overTimeControl"></div>
</div>

{include file="system@block/layui" /}
<script src="__PUBLIC_JS__/jquery.2.1.4.min.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/xm-select/dist/xm-select.js?v={:config('hisiphp.version')}"></script>
<script src="__PUBLIC_JS__/vue@3.2.26/dist/vue.global.js"></script>
<script type="text/javascript">
    var res_data={};//所有数据集
    var txt_data={};
    layui.use([ 'element', 'layer', 'laytpl', 'tool','laydate','table','form','flow'], function() {
        var element = layui.element;
        var layer = layui.layer;
        var $ = layui.jquery;
        var form = layui.form;
        var laytpl = layui.laytpl,laydate=layui.laydate ,table = layui.table;
        var flow = layui.flow;

        laydate.render({
            elem: '#create_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#create_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });
        laydate.render({
            elem: '#shipment_date_range'
            ,range: '~'
            ,theme: 'molv'
            ,mark: {'{:$today}':''}
            ,change: function(value, date, endDate){
                $('#shipment_date_range').val(value);
                $('#layui-laydate1').remove();//关闭面板
            }
        });

        form.on('submit(demo1)', function (data) {
            layui.jquery('#view').html('');
            layui.jquery('#view').unbind();//重置page数
            flowload( data.field);
            return false;
        });

        function flowload(formData=[]){
            flow.load({
                elem: '#view' //流加载容器
                //滚动条所在元素，一般不用填，此处只是演示需要。
                ,done: function(page, next){ //执行下一页的回调
                    console.log(page)
                    var lis = [];
                    var url = "{:url('mp/OutNodeProgress/cutting')}"+"?page="+page
                    $.ajax({
                        type: "POST",
                        url: url,
                        data: formData,
                        dataType:"json",
                        success: function(res){
                            if($.isEmptyObject(res.data) == false){
                                txt_data=res.txt;
                                res_data=$.extend(res_data, res.data);
                                var Tpl = $('#tpl').html();
                                laytpl(Tpl).render(res.data, function(html){
                                    // $('#view').html(html);
                                    lis.push(html);
                                    next(lis.join(''), page <= res.pageInfo.maxPage);
                                });
                                $('.layui-flow-more').find('a').trigger('click');
                            } else {
                                $('#view').find('div.layui-flow-more').html('<a href="javascript:;">没数据了</a>');
                                lis.push('暂无数据');
                            }
                            if(res.code==10001){
                                location.href=res.url;
                            }
                            //去除多余的div clear
                            if(layui.jquery('#view').find('div.clear').length>=2){
                                layui.jquery('#view').find('div.clear')[0].remove();
                            }
                            element.init();
                        }
                    });
                }
            });

        }
        flowload($('#hisi-table-search-optable').serialize());

        // 预计完成时间
        var layerOverTime;
        $(document).on('click','.workshop-set-overtime',function(){
            var client_ordernum = $(this).attr('data-option');
            var chejianPlanOverTime = parseInt($(this).attr('data-chejian_plan_over_time'));
            date = chejianPlanOverTime > 0? layui.util.toDateString(chejianPlanOverTime *1000, 'yyyy-MM-dd') : '';
            var content = laytpl($('#overTimeTpl').html()).render({});
            layer.close(layerOverTime);
            layerOverTime = layer.open({
                type: 1
                ,shade: 0
                ,offset: '100px'
                ,anim: parseInt(Math.random()*(6+1),10)
                ,area: ['276px', '368px']
                ,skin:'layui-layer-molv'
                ,title:'预计完成时间'
                ,content: content
                ,success: function(){
                    laydate.render({
                        elem: '#overTimeControl'
                        ,position: 'static'
                        ,btns: false
                        ,value: date
                        ,mark: {'{:$today}':''}
                        ,change: function(value, date){ //监听日期被切换
                            $.ajax({
                                type: "POST",
                                url: "{:url('mp/OutNodeProgress/setHopeShipmentTime')}",
                                data: {
                                    client_ordernum:client_ordernum
                                    ,date_time:value
                                    ,field:'hope_shipment_time'
                                },
                                dataType:"json",
                                success: function(res){
                                    if (res.code == 1) {
                                        layer.msg(res.msg, {icon: 1});
                                        layer.close(layerOverTime);
                                    } else {
                                        layer.msg(res.msg, {icon: 2,anim: 6});
                                    }
                                }
                            });
                        }
                    });
                }
            });

        });
    });

    //设置子工厂或分组
    function select_group_id(obj,order_id) {
        var group_id=$(obj).val();
        var url = "{:url('mp/Order/setGroupIdV2')}"
        $.ajax({
            type: "POST",
            url: url,
            data: {'order_id':order_id,'group_id':group_id,'outnodeset':1},
            dataType:"json",
            success: function(res){
            }
        });
    }
</script>